import Image from "next/image"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { Sparkles } from "lucide-react"


function FlywheelAnimation({ className = "" }) {
  return (
    <div className={`relative ${className}`}>
      <div className="absolute top-1/2 left-1/2 w-4 h-4 rounded-full transform -translate-x-1/2 -translate-y-1/2 animate-pulse
        bg-gradient-to-br from-blue-600/70 to-bera-yellow/70" />
      
      {[1, 2, 3].map((i) => (
        <div
          key={i}
          className={`absolute top-1/2 left-1/2 w-full h-full rounded-full 
            transform -translate-x-1/2 -translate-y-1/2 animate-spin`}
          style={{
            animationDuration: `${2 + i * 0.5}s`,
            animationTimingFunction: 'linear',
            animationIterationCount: 'infinite',
            transform: `translate(-50%, -50%) rotate(${i * 120}deg)`,
            borderTop: '4px solid rgba(37, 99, 235, 0.5)',
            borderLeft: '4px solid rgba(255, 196, 0, 0.5)',
            boxShadow: '0 0 10px rgba(37, 99, 235, 0.3)',
          }}
        />
      ))}
    </div>
  )
}

export default function FlywheelModelPage() {
  return (
    <main className="min-h-screen bg-dark-blue relative">
      
      <div className="fixed inset-0 z-0">
        
        <div className="absolute inset-0 bg-dark-blue opacity-80 z-10"></div>
        
        <Image src="/images/background.jpeg" alt="Background" fill className="object-cover opacity-40 z-0" priority />
      </div>

      <div className="relative z-10">
        <Navbar />

        
        <section className="relative pt-32 pb-16">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="mx-auto max-w-7xl">
              
              <div className="text-center mb-12 relative">
                
                <div className="hidden md:block absolute left-0 top-1/2 -translate-y-1/2">
                  <FlywheelAnimation className="w-32 h-32" />
                </div>
                <div className="hidden md:block absolute right-0 top-1/2 -translate-y-1/2">
                  <FlywheelAnimation className="w-32 h-32" />
                </div>
                
                <div className="flex flex-col items-center">
                  <h1 className="text-5xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-bera-yellow bg-clip-text text-transparent sm:text-5xl md:text-6xl mb-6">Flywheel Effect Model</h1>
                  
                 
                  <div className="md:hidden flex justify-center gap-8 mt-4">
                    <FlywheelAnimation className="w-20 h-20" />
                    <FlywheelAnimation className="w-20 h-20" />
                  </div>
                  
                  <p className="text-lg text-gray-300 max-w-3xl mx-auto mt-6">
                    Our innovative economic model creates a sustainable ecosystem through continuous value creation
                  </p>
                </div>
              </div>

              
              <div className="rounded-xl overflow-hidden shadow-2xl bg-gradient-to-br from-dark-blue-lighter to-bera-blue/10 p-4 md:p-8 backdrop-blur-sm">
                <div className="rounded-lg overflow-hidden shadow-lg transform transition-transform hover:scale-[1.01] duration-500">
                  <img src="/images/fly.jpg" alt="Beraroot Flywheel Effect Model" className="w-full h-auto" />
                </div>
              </div>

              
              <div className="mt-16 space-y-8">
                <div className="bg-gradient-to-br from-dark-blue-lighter/20 to-bera-blue/10 rounded-xl p-6 md:p-8 backdrop-blur-sm border border-bera-blue/20">
                  <h2 className="text-3xl font-bold text-bera-yellow mb-4">Beraroot's Flywheel Effect Model</h2>
                  <p className="text-gray-300 text-lg leading-relaxed">
                    The Beraroot Flywheel Model represents a self-reinforcing economic loop driven by the $BLUEBERA token. This model is designed to create aligned incentives across validators, liquidity providers, Layer2 users, and the broader community, ensuring long-term sustainability and decentralized participation.
                  </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {[
                    {
                      title: "1. Users stake $BLUEBERA to Beraroot Validators",
                      content: "Users initiate the flywheel by staking $BLUEBERA with Beraroot Validators. These validators participate in consensus and may also restake $stBLUEBERA on Berachain, increasing security and capital efficiency."
                    },
                    {
                      title: "2. Beraroot Validators contribute to the protocol economy",
                      content: "Validators can redirect staked assets to the Republic Validator, which acts as the economic controller. It allocates funds according to governance rules and system parameters (e.g., $BREA, BCV), powering various subsystems within the ecosystem."
                    },
                    {
                      title: "3. The Republic Validator manages distribution and emissions",
                      content: "The Republic Validator performs the following functions: Allocates liquidity to BEX pools ($stBLUEBERA / $Honey), Issues $BGT emissions to reward governance participants, Collects BVC fees, Accepts bribes in $BLUEBERA from the community to influence governance and validator delegation."
                    },
                    {
                      title: "4. The community engages through incentives and governance",
                      content: "Community members receive $BGT as incentives and may offer $BLUEBERA as bribes to participate in governance decisions, vote delegation, or validator selection. This ensures active, decentralized governance."
                    },
                    {
                      title: "5. BEX pools provide liquidity depth and market activity",
                      content: "Liquidity providers supply $stBLUEBERA and $Honey to BEX, creating deep liquidity pools that support healthy on-chain markets within the Beraroot ecosystem."
                    },
                    {
                      title: "6. Layer2 users interact with PoL smart contracts",
                      content: "Layer2 users trigger smart contracts that utilize protocol-owned $BLUEBERA liquidity. These interactions cycle tokens back into the validator layer, completing the loop."
                    }
                  ].map((item, index) => (
                    <div key={index} className="bg-gradient-to-br from-dark-blue-lighter/20 to-bera-blue/10 rounded-xl p-6 backdrop-blur-sm border border-bera-blue/20 hover:border-bera-yellow/30 transition-colors duration-300">
                      <h3 className="text-xl font-semibold text-bera-yellow mb-3">{item.title}</h3>
                      <p className="text-gray-300 leading-relaxed">{item.content}</p>
                    </div>
                  ))}
                </div>

               
                <div className="bg-gradient-to-br from-dark-blue-lighter/20 to-bera-blue/10 rounded-xl p-6 md:p-8 backdrop-blur-sm border border-bera-blue/20">
                  <h2 className="text-2xl font-bold text-bera-yellow mb-4">✅ Summary</h2>
                  <p className="text-gray-300 text-lg leading-relaxed mb-4">
                    The flywheel creates a powerful feedback loop:
                  </p>
                  <div className="flex flex-wrap items-center gap-2 mb-4">
                    {[
                      "Staking",
                      "Validator Coordination",
                      "Emissions",
                      "Community Engagement",
                      "Governance",
                      "Liquidity",
                      "Layer2",
                      "Staking again"
                    ].map((item, index, array) => (
                      <>
                        <span key={index} className="px-3 py-1 bg-bera-blue/20 rounded-full text-bera-yellow text-sm">
                          {item}
                        </span>
                        {index < array.length - 1 && (
                          <span className="text-bera-yellow text-sm">→</span>
                        )}
                      </>
                    ))}
                  </div>
                  <p className="text-gray-300 text-lg leading-relaxed">
                    This model ensures that all ecosystem participants—users, validators, liquidity providers, and developers—contribute to and benefit from the growth of Beraroot.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <Footer />
      </div>
    </main>
  )
}
